<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
    <title>灯泡控制和聊天框</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        h2 {
            display: block;
            margin-bottom: 20px; /* 添加底部外边距以确保换行 */
        }
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            display: flex; /* 可选：使用 Flexbox 来居中内容 */
            justify-content: center; /* 可选：居中内容 */
            align-items: center; /* 可选：垂直居中内容 */
            height: 100%; /* 可选：确保 body 高度为 100% */
            background-color: #f4f4f4;
            flex-direction: column;
        }
        .container {
            display: grid;
            grid-template-columns: 1fr 1fr;
            height: 80vh;
            width: 80vw;
            padding: 20px;
            gap: 20px;
            justify-items: center; /* 使内容居中 */
        }
        .left-panel {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            padding: 20px;
            width: 300px; /* 恢复宽度 */
        }
        #lightbulb {
            width: 100px;
            height: 150px;
            border-radius: 50px 50px 0 0;
            position: relative;
            margin-bottom: 40px; 
        }
        #lightbulb::after {
            content: '';
            width: 60px;
            height: 20px;
            background-color: #c2c2c2;
            border-radius: 10px;
            position: absolute;
            bottom: -20px;
            left: 50%;
            transform: translateX(-50%);
        }
        .buttons {
            display: flex;
            justify-content: space-between;
            width: 100%;
        }
        .button {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            border: none;
            cursor: pointer;
            transition: transform 0.1s;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
        }
        .button:active {
            transform: translateY(4px);
        }
        .red {
            background-color: #ff4d4d;
        }
        .green {
            background-color: #4dff4d;
        }
        .black {
            background-color: #333;
        }
        .chat-box {
            background-color: #fff;
            border: 1px solid #ccc;
            border-radius: 8px;
            padding: 10px;
            overflow-y: visible;
            height: 300px; /* 调整高度 */
            width: 90%; /* 调整宽度 */
            max-width: 400px; /* 设置最大宽度 */
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            display: flex;
            flex-direction: column;
            margin-top: 20px; /* 减少聊天框与灯泡区域的距离 */
        }
        #messages {
            overflow-y: auto; /* 让消息区域可滚动 */
            flex: 1; /* 使消息区域占据剩余空间 */
        }
        .chat-box p {
            margin: 5px 0;
        }
        .input-area {
            display: flex;
            margin-top: auto; /* 确保输入框在底部 */
        }
        .input-area input {
            flex: 1;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 4px;
            margin-right: 10px;
        }
        .input-area button {
            padding: 10px;
            border: none;
            border-radius: 4px;
            background-color: #007bff;
            color: #fff;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        .input-area button:hover {
            background-color: #0056b3;
        }
        .btn-red {
            background-color: #ff4d4d;
        }
        .btn-green {
            background-color: #4dff4d;
        }
        .btn-off {
            background-color: #ccc;
        }
        #connect-status {
            display: inline-block;
            margin-right: 10px;
            background-color: #4dff4d;
            border-radius: 50% ;
            width: 15px;
            height: 15px;
        }
        @media (max-width: 768px) {
            .container {
                grid-template-columns: 1fr;
                width: 90%; /* 或 100% */
                margin: 0 auto; /* 确保居中 */
            }
            .left-panel {
                margin-bottom: 20px;
            }
            .buttons {
                flex-direction: row;
                flex-wrap: wrap;
                justify-content: center;
            }
            .button {
                margin: 5px;
            }
            .chat-box {
                margin-left: 0;
            }
            body {
                padding: 0 0 50px 0;
            }
        }
    </style>
</head>
<body>
<h2 id="id-show"><span id="connect-status"></span>你的号码为: {{ . }}</h2>
<div class="container">
    <div class="left-panel">
        <div id="lightbulb" class="btn-green"></div>
        <div class="buttons">
            <button id="btn-red" class="button red"></button>
            <button id="btn-green" class="button green"></button>
            <button id="btn-off" class="button black"></button>
        </div>
    </div>
    <div class="chat-box" style="position: relative;">
        <p id="online-count" style="position: absolute; top: -30px; color: #444;">当前在线人数: 0</p>
        <div id="messages">
        </div>
        <div class="input-area">
            <input id="message" type="text" placeholder="输入消息...">
            <button id="send">发送</button>
        </div>
    </div>
</div>
<script>
    let uid = {{ . }};
    
    $(document).ready(function() {
        // 获取当前页面的协议和主机名
        const protocol = window.location.protocol === 'https:' ? 'wss' : 'ws';
        const host = window.location.host;
        var ws
        if (uid == "-1") {
            $("#id-show").html("号码已用完,无法为您注册");
            return;
        }
        function reconnect() {
            // 创建 WebSocket 连接
            ws = new WebSocket(`${protocol}://${host}/ws`);
            ws.onopen = function() {
                $("#connect-status").attr("style","background-color: #4dff4d;");
            }
            ws.onclose = function() {
                console.log("正在尝试重连");
                $("#connect-status").attr("style","background-color: darkorange;");
                setTimeout(function() {
                    reconnect();
                },1000);
            }
            // 监听 WebSocket 消息
            ws.onmessage = function(event) {
                const data = JSON.parse(event.data);
                if (data.type === 'online_count') {
                    $("#online-count").html("当前在线人数: "+data.data)
                }
                // 更新聊天消息
                if (data.type === 'chat_message') {
                    appendMessage(data.data);
                }

                if (data.type === 'chat_message_init') {
                    $("#messages").empty();
                    //console.log(data.data);
                    for(i=0;i<data.data.length;i++) {
                        appendMessage(data.data[i]);
                    }
                }

                if (data.type === 'bulb-set') {
                    $("#lightbulb").removeAttr("class");
                    $("#lightbulb").addClass("button");
                    $("#lightbulb").addClass("btn-"+data.data);
                }

            };
        }
        reconnect();
        function appendMessage(data) {
            $("#messages").append(`<p></p>`);
            converted = $("#messages").children().last().text(`: ${data.content}`).html();
            console.log(converted);
            $("#messages").children().last().html(`<strong>${data.sender}</strong>`+converted);
            $("#messages").scrollTop($("#messages")[0].scrollHeight); // 滚动到底部
        }
        $("#send").click(function() {
            var message = $("#message").val();
            if (message) {
                //ws.send(message);
                ws.send(JSON.stringify({ action: 'send_message' ,data: message }));
                $("#message").val(""); // 清空输入框
            }
        });

        $("#message").keypress(function(event) {
            if (event.which === 13) { // 按下 Enter 键
                $("#send").click();
            }
        });

        $("#btn-red").click(function(){
            ws.send(JSON.stringify({ action: 'set_button', data: "red" }));
        });
        $("#btn-green").click(function(){
            ws.send(JSON.stringify({ action: 'set_button', data: "green" }));
        });
        $("#btn-off").click(function(){
            ws.send(JSON.stringify({ action: 'set_button', data: "off" }));
        });
    });
</script>
</body>
</html>